<template>
  <!--  -->
  <section class="banner">
    <div class="container-fluid">
      <banner-carousel :bannerList="bannerList"></banner-carousel>
    </div>
  </section>

  <!-- What we offer ? -->
  <section class="info">
    <div class="container">
      <h3 class="text-center">What we offer ?</h3>
      <p class="text-center"></p>
      <div class="row">
        <template
          v-for="(item, index) in $tm('message.Home.Service.details')"
          :key="index"
        >
          <div class="col-sm-4 info-box">
            <i :class="item.iconStyle" aria-hidden="true"></i>
            <h4>{{ item.title }}</h4>
            <!-- <p></p> -->
          </div>
        </template>
      </div>
    </div>
  </section>

  <!-- Why choose us -->
  <section class="about">
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <div class="about-details text-center" style="">
            <h2>Why CHOOSE US</h2>
            <p class="text-center"></p>
          </div>
        </div>
        <div class="col-md-12">
          <iframe
            id="articleIframe"
            style="width: 100%"
            scrolling="no"
            frameborder="0"
            :src="wordPressArticleUrl"
          ></iframe>
        </div>
      </div>
    </div>
  </section>

  <!--  Business Scope-->
  <section class="business-scope" id="business-scope">
    <div class="container">
      <h3 class="text-center">Business Scope</h3>
      <p class="text-center"></p>
      <div class="row">
        <div class="col-md-12">
          <div class="">
            <business-scope-carousel
              :homeBusinessScopeList="homeBusinessScopeList"
            >
            </business-scope-carousel>
            <!-- 
              <button class="btn jump-button" @click="jumpLink('/service')">
              View More
            </button> 
            -->
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- 项目 -->
  <section class="project-type" id="project">
    <div class="container">
      <h3 class="text-center">Project Case</h3>
      <p class="text-center"></p>
      <div class="row">
        <template v-for="(item, index) in homeProjectList" :key="index">
          <div
            class="col-md-6 p-3"
            @click="jumpLink(`/project/detail/${item.id}`)"
          >
            <figure class="effect-chico">
              <img
                class="img-fluid"
                :src="
                  $getImgUrlFromMediaById(item.featured_media_src_url)
                    ? $getImgUrlFromMediaById(item.featured_media_src_url)
                    : require('@/assets/image/blank-profile-picture-973460_640.png')
                "
                style="height: 50vh"
              />
              <figcaption>
                <h4>{{ $wordpressDecodeHTML(item.title.rendered) }}</h4>
                <!-- <p>Lorem ipsum dolor sit amet.</p> -->
              </figcaption>
            </figure>
          </div>
        </template>
        <div class="col-12 text-center">
          <button class="btn jump-button" @click="jumpLink('/project')">
            View all Project
          </button>
        </div>
      </div>
    </div>
  </section>

  <!-- Service -->
  <section class="service" id="service">
    <div class="container">
      <div class="row">
        <div class="col-md-6">
          <service-carousel></service-carousel>
        </div>
        <div class="col-md-6">
          <div class="sitewidget-text">
            <div class="title">Service</div>
          </div>
          <div class="service-content">
            <div class="d-flex align-items-start service-box">
              <div class="flex-shrink-0 me-3 icon-box">
                <i class="fa-solid fa-comments"></i>
              </div>
              <div>
                <h4 class="fw-bold mb-0">Project Support</h4>
                <p class="description">
                  Project support can be tailored to meet the needs of the
                  project and also the experience level of the system designer
                  and installation teams
                </p>
              </div>
            </div>

            <div class="d-flex align-items-start service-box">
              <div class="flex-shrink-0 me-3 icon-box">
                <i class="fa-solid fa-people-robbery"></i>
              </div>
              <div>
                <h4 class="fw-bold mb-0">Training</h4>
                <p class="description">
                  Technical training is essential for sales
                  representatives,system designers and installers.
                </p>
              </div>
            </div>

            <div class="d-flex align-items-start service-box">
              <div class="flex-shrink-0 me-3 icon-box">
                <i class="fa-solid fa-screwdriver-wrench"></i>
              </div>
              <div>
                <h4 class="fw-bold mb-0">Product Warranty</h4>
                <p class="description">
                  Provide 1-3 year warranty and after-sale service for
                  maintenance instruction. 24-hour service hotline, ready to
                  solve your questions all the time. First-class professional
                  team for your design and recommend products more in line with
                  your needs.
                </p>
              </div>
            </div>
          </div>
          <div class="view-more">
            <a href="#" target="_blank">
              VIEW MORE 丨&nbsp;<i class="fa fa-arrow-right"></i>
            </a>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- 置顶项目轮播 -->
  <!-- 
    <section class="project">
    <div class="container-fluid">
      <project-carousel :projectList="homeProjectList"></project-carousel>
    </div>
  </section> 
  -->

  <!-- Why to buy -->
  <section class="buy">
    <div class="container">
      <div class="">
        <div class="title">Why to buy</div>
      </div>
      <div class="row">
        <div class="col-9" style="">
          <div class="content">
            View more for the contact information for each office, or complete
            an inquiry form to contact the head office.
          </div>
        </div>
        <div class="col-3" style="">
          <div class="view-more">
            <a
              href="https://gdbesto.en.alibaba.com"
              target="_blank"
              title="https://gdbesto.en.alibaba.com"
            >
              VIEW MORE 丨&nbsp;<i class="fa fa-arrow-right"></i>
            </a>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- 博客 -->
  <section class="blog">
    <div class="container">
      <div class="sitewidget-text">
        <div class="title">Lastest News Posts</div>
      </div>
      <div class="row">
        <blog-carousel :homeBlogList="homeBlogList"></blog-carousel>

        <!-- 
          <div class="col-12 text-center" style="margin-top: 50px">
          <button class="btn jump-button" @click="jumpLink('/blog')">
            View all blogs
          </button>
        </div> 
        -->
      </div>
    </div>
  </section>
</template>

<script>
import BannerCarousel from "./components/BannerCarousel.vue";
import ProjectCarousel from "./components/ProjectCarousel.vue";
import BusinessScopeCarousel from "./components/BusinessScopeCarousel.vue";
import ServiceCarousel from "./components/ServiceCarousel.vue";
import BlogCarousel from "./components/BlogCarousel.vue";

import {
  reactive,
  toRefs,
  onBeforeMount,
  onMounted,
  getCurrentInstance,
  computed,
} from "vue";

export default {
  name: "HomeIndex",
  components: {
    BannerCarousel,
    ProjectCarousel,
    BusinessScopeCarousel,
    BlogCarousel,
    ServiceCarousel,
  },
  props: {},
  setup() {
    const { proxy } = getCurrentInstance();

    const data = reactive({
      homeProfile: computed(() => proxy.$store.getters.homeProfile),
      bannerList: computed(() => proxy.$store.getters.bannerList),
      homeProjectList: computed(() => proxy.$store.getters.homeProjectList),
      homeBlogList: computed(() => proxy.$store.getters.homeBlogList),
      homeBusinessScopeList: computed(
        () => proxy.$store.getters.homeBusinessScopeList
      ),
      //
      wordPressArticleUrl: `/wordpress/archives/50`,
    });
    const refData = toRefs(data);
    onBeforeMount(() => {});
    onMounted(() => {
      var iframeObj = document.getElementById("articleIframe");
      iframeObj.onload = function () {
        proxy.$iframeAutoFit(iframeObj);

        setTimeout(function () {
          console.log(iframeObj.height);
          iframeObj.height = iframeObj.height - 50;
        }, 500);
      };
    });

    //
    const methods = {
      jumpLink(url) {
        proxy.$router.push(url);
      },
    };
    //
    return {
      ...refData,
      //
      ...methods,
    };
  },
};
</script>
//
<style lang="scss" scoped>
.sitewidget-text {
  // border-left: 4px solid #f7c10b;
  border-right: 0 solid #000;
  border-top: 0 solid #000;
  border-bottom: 0 solid #000;
  border-top-right-radius: 0;
  border-top-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 20px;
  margin-left: 0;
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  // padding-left: 14px;
  box-shadow: 0;
}

section.about {
  padding: 5% 0 0;

  // background-color: #f7f7f7;

  .about_left {
    padding-left: 0;
    margin: 0;
  }

  h2 {
    font-size: 2.5rem;
    font-weight: 600;
    //padding-bottom: 20px;
    text-transform: uppercase;
    color: #2e6f97;
    // padding: 55px 55px 0;
  }

  p {
    font-size: 16px;
    padding-bottom: 50px;
  }

  img.about3 {
    padding-top: 150px;
  }
}

section.info {
  padding: 5% 0;
  background-color: #f7f7f7;

  h3 {
    font-size: 2.5rem;
    font-weight: 600;
    //padding-bottom: 20px;
    text-transform: uppercase;
    color: #2e6f97;
    // padding: 55px 55px 0;
    position: relative;
    top: 20px;
  }

  p {
    font-size: 16px;
    padding-bottom: 50px;
  }

  .info-box {
    padding: 20px 0;
    // margin-bottom: 10px;
    i {
      font-size: 25px;
      vertical-align: middle;
      text-align: center;
      color: #f38181;
    }

    h4 {
      font-size: 24px;
      font-weight: 700;
      padding: 15px 0 10px;
      color: #000;
    }

    p {
      font-size: 15px;
      padding: 0px 0 45px;
      line-height: 30px;
      color: #000;
    }
  }
}

section.service {
  padding: 5% 0;
  background-color: #f2f3f8;

  h3 {
    color: #fff;
    font-size: 2.5rem;
    font-weight: 600;
    padding: 30px 0;
    line-height: 80px;
    text-transform: uppercase;
  }

  .title {
    font-size: 2.5rem;
    // font-family: Muli, sans-serif;
    color: #2c7095;
    line-height: 1;
    margin-bottom: 10px;
    text-transform: uppercase;
  }

  .service-content {
    h4 {
      font-size: 18px;
      color: #3c3a3e;
      font-weight: 400;
      letter-spacing: 0;
      line-height: 1.8em;
      text-align: left;
    }

    .icon-box {
      i {
        font-size: 2rem;
      }
    }

    .description {
      font-size: 16px;
      color: #999;
      font-weight: 400;
      letter-spacing: 0;
      line-height: 1.7em;
      text-align: left;
    }

    .service-box {
      margin-bottom: 20px;
    }
  }

  .view-more {
    text-align: center;
    border: 1px solid #fff;
    background-color: #235852;
    width: 50%;

    a {
      color: #fff;
      height: 52px;
      line-height: 52px;
      width: 50%;
    }

    &:hover {
      background-color: #f6c00d;
      border: 1px solid #f6c00d;
      a {
        color: #235852;
      }
    }
  }
}

section.business-scope {
  padding: 5% 0;

  h3 {
    font-size: 2.5rem;
    font-weight: 600;
    color: #2c7095;
    //padding-bottom: 20px;
    text-transform: uppercase;
  }

  p {
    font-size: 16px;
    padding-bottom: 50px;
  }
}

section.project-type {
  padding: 5% 0;

  h3 {
    font-size: 2.5rem;
    font-weight: 600;
    color: #2c7095;
    //padding-bottom: 20px;
    text-transform: uppercase;
  }

  p {
    font-size: 16px;
    padding-bottom: 50px;
  }

  figure {
    position: relative;
    float: left;
    overflow: hidden;
    margin: 0;
    width: 100%;
    height: calc(100% - 15px);
    background: #3085a3;
    text-align: center;
    cursor: pointer;

    figcaption {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

    img {
      position: relative;
      display: block;
      height: auto;
      width: 100%;
      opacity: 0.8;
    }
  }

  figure.effect-chico img {
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: scale(1.12);
    transform: scale(1.12);
  }
  figure.effect-chico:hover img {
    opacity: 0.5;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  figure.effect-chico figcaption {
    align-items: center;
    display: flex;
    justify-content: center;
    padding: 3em;
  }
  figure.effect-chico figcaption::before {
    position: absolute;
    top: 30px;
    right: 30px;
    bottom: 30px;
    left: 30px;
    border: 1px solid #fff;
    content: "";
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }

  //不显示
  figure.effect-chico figcaption::before,
  figure.effect-chico p {
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
  }
  figure.effect-chico h4 {
    // padding: 35% 0 0 0;
    font-size: 2rem;
    color: #fff;
  }

  figure.effect-chico p {
    margin: 0 auto;
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
    line-height: 2em;
    color: #fff;
  }

  //显示
  figure.effect-chico:hover figcaption::before,
  figure.effect-chico:hover p {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  .jump-button {
    margin-top: 20px;
    padding: 1.25rem 2rem;
    border-radius: 2rem;
  }
}

section.project {
  .container-fluid {
    padding-right: var(--bs-gutter-x, 0);
    padding-left: var(--bs-gutter-x, 0);
  }
}

section.blog {
  padding: 5% 0;
  background-color: #f2f3f8;

  .title {
    font-size: 2.5rem;
    // font-family: Muli, sans-serif;
    color: #2c7095;
    line-height: 1;
    margin-bottom: 10px;
    text-transform: uppercase;
  }

  .subtitle {
    font-size: 1.125rem;
    // font-family: Muli, sans-serif;
    color: #848d91;
    line-height: 1;
    text-align: center;
    margin-bottom: 40px;
  }

  .post {
    .entry-image {
      position: relative;
      img {
        width: 100%;
        max-height: 250px;
      }

      a {
        position: absolute;
        top: 1.5rem;
        left: 1.5rem;
        -webkit-transform: none;
        -moz-transform: none;
        transform: none;
        text-align: center;

        i {
          font-size: 1rem;
          color: white;
          width: 2rem;
          height: 2rem;
          line-height: 2rem;
          background: #0fccba;
          border-radius: 0;
        }
      }

      a:last-child {
        top: 3.5rem;

        i {
          background: #8260e3;
        }
      }
    }

    .entry-wrapper {
      -webkit-box-shadow: 0 0 40px 2px rgba(0, 0, 0, 0.1);
      -moz-box-shadow: 0 0 40px 2px rgba(0, 0, 0, 0.1);
      box-shadow: 0 0 40px 2px rgba(0, 0, 0, 0.1);
    }

    .entry-content {
      background: #fff;
    }

    .post-title {
      font-size: 1.5rem;
      font-family: Muli, sans-serif;
      font-weight: 400;
      line-height: 1;
      margin-bottom: 30px;
      color: #2f3437;
    }

    .post-publishTime {
      font-size: 1rem;
      font-family: "Source Sans Pro", sans-serif;
      font-weight: 600;
      text-transform: uppercase;
      line-height: 1;
      margin-bottom: 10px;
      color: #0accb9;
    }

    .post-description {
      font-size: 1rem;
      font-family: "Source Sans Pro", sans-serif;
      font-weight: 300;
      margin-bottom: 2rem;
      color: #7e8284;

      p {
        position: relative;
        width: 100%;
        height: 3rem;
        line-height: 1.5rem;
        margin-right: -1em;
        padding-right: 1em;
        overflow: hidden;
        word-break: break-all;
      }

      p::after {
        background: linear-gradient(
            to right,
            rgba(255, 255, 255, 0),
            #ffffff 50%
          )
          repeat scroll 0 0 rgba(0, 0, 0, 0);
        bottom: 0;
        content: "...";
        padding: 0 5px 1px 30px;
        position: absolute;
        right: 0;
      }
    }

    .post-readMore {
      font-size: 0.8rem;
      font-family: "Source Sans Pro", sans-serif;
      font-weight: 600;
      text-transform: uppercase;
      line-height: 1;
      color: #2f3437;
    }
  }

  .jump-button {
    padding: 1.25rem 2rem;
    border-radius: 2rem;
  }
}

section.buy {
  padding: 5% 0;
  background-color: #235852;

  .title {
    font-size: 2.5rem;
    // font-family: Muli, sans-serif;
    color: #f6c00d;
    line-height: 1;
    margin-bottom: 10px;
    text-transform: uppercase;
  }

  .content {
    font-size: 24px;
    color: #fff;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.8em;
    text-align: left;
  }

  .view-more {
    text-align: center;
    border: 1px solid #fff;

    a {
      color: #fff;
      height: 52px;
      line-height: 52px;
      width: 86%;
    }

    &:hover {
      background-color: #f6c00d;
      border: 1px solid #f6c00d;
      a {
        color: #235852;
      }
    }
  }
}
</style>
